<template>
    <div class="" :style="{ width: '100%', height: data.style.height + 'px', borderRadius: `${data.rpxStyle['border-radius']}px`, overflow: 'hidden' }">
        <video
            :src="data.data.video_src"
            :width="375 - data.rpxStyle['margin-left'] * 2"
            :height="data.style.height"
            controls
            :poster="data.data.video_cover"
            style="object-fit: fill"
            webkit-playsinline="true"
            playsinline="true"
            x-webkit-airplay="allow"
            preload="none"
            :autoplay="false"
            controlslist="nodownload"
            v-if="data.data.video_src"
        >
            您的浏览器不支持Video标签。
        </video>
        <img :src="data.data.nonde_img" style="width: 100%; height: 100%" v-else />
    </div>
</template>

<script setup>
/**
 * 视频容器
 * @property {Object} data  数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 15,
            type_name: "video",
            text: "视频容器",
            style: {
                height: 240,
            },
            data: {
                video_src: "",
                video_title: "",
                video_cover: "",
                nonde_img:
                    "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
            },
        },
    },
})
</script>

<style lang="less" scoped></style>
